<template>
  <div class="app-container">
      <div style="padding-left:230px;padding-right:150px">
            <el-steps :active="active" finish-status="success" simple >
            <el-step title="商品的基本信息"></el-step>
            <el-step title="添加商品图片"></el-step>
            <el-step title="商品的sku信息"></el-step>
            </el-steps>
      </div>
  
    <br />
    <!-- 商品基本信息 -->
    <el-row v-show="active == 1">
      <el-col :span="16" :offset="4">
        <el-form ref="form" label-width="120px">
          <el-form-item label="商品标题" v-model="entity.goods.goodsName">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品副标题" v-model="entity.goods.caption">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-select placeholder="请选择一级分类" v-model="entity.goods.category1Id">
              <el-option v-for="cat in catList1" :key="cat.cid" :label="cat.name" :value="cat.cid"></el-option>
            </el-select>
            <el-select placeholder="请选择二级分类" v-model="entity.goods.category2Id">
              <el-option v-for="cat in catList2" :key="cat.cid" :label="cat.name" :value="cat.cid"></el-option>
            </el-select>
            <el-select placeholder="请选择三级分类" v-model="entity.goods.category3Id">
              <el-option v-for="cat in catList3" :key="cat.cid" :label="cat.name" :value="cat.cid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品模板" >
            <el-input disabled v-model="mname" ></el-input>
          </el-form-item>
          <el-form-item label="商品品牌">
            <el-select placeholder="请选择品牌" v-model="entity.goods.brandId">
              <el-option v-for="brand in brandList" :key="brand.id" :label="brand.name" :value="brand.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商城价">
            <el-input-number
              :precision="2"
              :step="0.1"
              :max="10"
            ></el-input-number>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="active = 2">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 商品图片 -->
    <el-row v-show="active == 2">
      <el-button @click="imageDialogVisible = true">添加图片</el-button>
      <el-col :span="16" :offset="4">
        <el-table :data="imgsList">
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img src="" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <el-button type="primary" @click="active = 3">下一步</el-button>

        <!-- 添加图片dialog -->
        <el-dialog
          title="添加图片"
          :visible.sync="imageDialogVisible"
          :close-on-click-modal="false"
        >
          <el-form ref="brandForm">
            <el-form-item label="商品图片" prop="logo">
              <el-upload
                action="http://localhost:8080/upload"
                list-type="picture-card"
                name="headerImage"
                :on-success="uploadSuccess"
                :limit="1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="imageDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>


<!-- sku -->
    <el-row v-show="active == 3">
      <el-col :span="16" :offset="4">
        <div v-for="(spec, index) in specArr">
          <span>{{ spec.specName }} </span>
          <el-checkbox
            v-model="opt.enable"
            @change="genSku()"
            v-for="(opt, index) in spec.options"
            >{{ opt.optionName }}</el-checkbox
          >
        </div>
         <el-table style="width: 100%" border :data="skus">
            <template v-for="(item,index) in skus">
                <el-table-column :prop="item.column_name" :label="item.column_comment" :key="index" v-show="item.column_name != 'id'"></el-table-column>
            </template>
            <el-table-column prop="num" label="库存">
                <template slot-scope="scope">
                    <el-input v-model="skus[scope.$index].num"/>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格">
                <template slot-scope="scope">
                    <el-input v-model="skus[scope.$index].price"/>
                </template>
            </el-table-column>
            <el-table-column prop="tc" label="提成">
                <template slot-scope="scope">
                    <el-input v-model="skus[scope.$index].tc"/>
                </template>
            </el-table-column>
         </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {findByParentId} from "../api/cat"
export default {
  data() {
    return {
      searchMap:{
            page:0,
            size:0,
            where:{
                parentId: 0
            }    //data就是parent_id  ,默认查一级商品分类
      },
      active: 1,
      imgsList: ["a", "b"],
      imageDialogVisible: false,
      specArr: [],
      chooseSpec: [],
      skus:[{spec:{"内存":"4G","颜色":"红色"},tc:0,num:99,price:0}],
      catList1:[],
      catList2:[],
      catList3:[],
      entity:{
        goods:{},
        skus:[]
      },
      brandList:[], //品牌列表
      mname: '', //模板名称
      

    };
  },
  methods: {
    search(pid,level){
      this.searchMap.where.parentId =pid;
      findByParentId(this.searchMap).then(res =>{
        if(level === 1){
          this.catList1 = res.data;
        }
        if(level === 2){
          this.catList2 = res.data;
        }
        if(level === 3){
          this.catList3 = res.data;
        }
      })

    }
  },
  watch:{
    //监听一级分类
    'entity.goods.category1Id':{
      handler(newVal,oldVal){
          console.log(newVal);
          this.search(newVal,2)
      }
    },
    // 监听二级分类
    'entity.goods.category2Id':{
      handler(newVal,oldVal){
          console.log(newVal);
          this.search(newVal,3)
      }
    },
    // 监听三级级分类
    'entity.goods.category3Id':{
      handler(newVal,oldVal){
          console.log(newVal);
          this.catList3.forEach(cat =>{
            if(cat.cid == newVal){
              this.brandList = JSON.parse(cat.brands);
              this.mname = cat.mname;
              this.entity.goods.typeTemplateId = cat.mid
            }
          })
          
      }
    }
  },
  created() {
    this.search(0,1)
  },
};
</script>